﻿@page
@model Chino.IdentityServer.Pages.Account.LoginModel
@using Chino.IdentityServer.Extensions.Configurations 
@using Chino.IdentityServer.Enums.Account
@inject IStringLocalizer<Chino.IdentityServer.Pages.Account.LoginModel> L
@inject Chino.IdentityServer.Services.Account.IAccountService AccountService
@inject CommonLocalizationService CL


@{
    ViewContext.ClientValidationEnabled = true;
    ViewData["Nav_ShowLogin/Out"] = false;
    ViewData["Title"] = L["title_login"];
}

<div class="login-page pb-4 mb-4">

    <div class="login-form">
        <div class="lead">
            <h1 class="h3 mb-3 fw-normal">@L["title_login"]</h1>
        </div>
        <partial name="ValidationSummary" />

        @if (Model.LoginViewModel.EnableLocalLogin)
        {
            <div class="card mt-1 shadow text-center">
                @*旧的固定标题*@
                @*<div class="card-header">
                    <h3 class="h5">@L["login_by_account"]</h3>
                </div>*@

                @*新的选择夹式样标题*@
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="true" href="#">@L["login_by_account"]</a>
                        </li>
                        @if (AccountService.EnableLoginByPhone)
                        {
                            <li class="nav-item">
                                <a class="nav-link" 
                                   asp-page="/Account/PhoneLogin" 
                                   asp-route-returnUrl="@Model.ReturnUrl" 
                                   asp-route-loginType="@((int)ELoginViewType.PhoneAndPassword)">@L["login_by_phonePassword"]</a>
                            </li>
                        }
                        @if (AccountService.EnableLoginBySMSVerificationCode)
                        {
                            <li class="nav-item">
                                <a class="nav-link"
                                   asp-page="/Account/SMSLogin"
                                   asp-route-returnUrl="@Model.ReturnUrl" 
                                   asp-route-loginType="@((int)ELoginViewType.SMSVerificationCode)">@L["login_by_smsVerificationCode"]</a>
                            </li>
                        }
                    </ul>
                </div>
                <div class="card-body">
                    <form asp-route="Login">
                        <div class="form-group">
                            <label asp-for="IdentityString" class="visually-hidden">@AccountService.GetLoginLabelText(CL)</label>
                            <input class="form-control input-head" id="identityString" placeholder="@AccountService.GetLoginLabelText(CL)" asp-for="IdentityString" autofocus>
                        </div>
                        <div class="form-group">
                            <label asp-for="LoginDto.Password" class="visually-hidden">@L["password"]</label>
                            <input type="password" id="password" class="form-control input-end" placeholder="@L["password"]" asp-for="LoginDto.Password" autocomplete="off">
                        </div>
                        <div class="form-group text-left">
                            <div>@*<span asp-validation-for="IdentityString" class="text-danger"></span>*@</div>
                            <div><span asp-validation-for="LoginDto.Password" class="text-danger"></span></div>
                        </div>

                        @if (Model.LoginViewModel.AllowRememberLogin)
                        {
                            <div class="checkbox mb-3 mt-2 text-left">
                                <label>
                                    <input type="checkbox" asp-for="LoginDto.RememberLogin" /> @L["remember_login"]
                                </label>
                            </div>
                        }
                        <div class="d-grid d-sm-block gap-2 mx-auto">
                            <button class="btn btn-primary px-5" name="button" value="login">@L["btn_login"]</button>
                            <button class="btn btn-secondary px-5" formnovalidate name="button" value="cancel">@L["btn_cancel"]</button>
                            @*  使用class "cancel" 可以跳过客户端的表单验证，或者使用"formnovalidate" *@
                        </div>
                    </form>

                </div>
                <div class="card-footer text-muted">
                    @if (AccountService.EnableRegister)
                    {
                        <a asp-page="Account/ForgetPassword" class="link-secondary">@L["link_forget_password"]</a> @("|") <a asp-page="/Account/Register" class="link-secondary">@L["link_register"]</a>
                    }
                    else
                    {
                        <a asp-page="Account/ForgetPassword" class="link-secondary">@L["link_forget_password"]</a>
                    }
                </div>
            </div>
        }
        
        @if (Model.LoginViewModel.VisibleExternalProviders.Any())
        {
            <div class="card mt-4 mb-2 shadow text-center">
                <div class="card-body">
                    <div class="card-title">
                        @L["Login with another account"]
                    </div>
                    <form id="external-account" asp-page="./External/ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post">
                        <div class="d-grid gap-3 d-md-block">
                            @foreach (var provider in Model.LoginViewModel.VisibleExternalProviders)
                            {
                                <button class="btn btn-outline-secondary" type="submit" name="provider" value="@provider.AuthenticationScheme">
                                    @provider.DisplayName
                                </button>
                            }
                        </div>
                    </form>
                </div>
            </div>
        }

    </div>
    
    
</div>


<style>

    body {
        background-color: #f5f5f5;
    }

    
    .login-form{
        width:100%;
        max-width:380px;
        margin:auto;
    }


    .login-form .form-control{
        position:relative;
        box-sizing:border-box;
        height:auto;
        padding:10px;
        font-size:16px;
    }

    .login-form .form-control:focus{
        z-index:2;
    }

    .login-form .checkbox{
        font-weight: 400;
    }

    .login-form .input-head {
        margin-bottom: -1px;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
    }

    .login-form .input-end {
        margin-bottom: 10px;
        border-top-left-radius:0;
        border-top-right-radius:0;
    }

    .login-form .card-footer{
        font-size:small;
    }

    .login-form .card-footer a{
        text-decoration:none;
    }

    .login-form .card-footer a:hover{
        text-decoration:none;
    }
</style>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}